<template>
  <el-form
    :model="formModel"
    label-width="120"
    label-placement="left"
    label-align="right"
    :rules="formRules"
    @submit.prevent="confirm"
  >
    <el-form-item label="图片（单选）" prop="Thumbnail">
      <ImageUpload
        ref="thumbnailRef"
        v-model="formModel.Thumbnail"
      ></ImageUpload>
    </el-form-item>
    <el-form-item label="时间10天内" prop="DateRange">
      <el-date-picker
        v-model="formModel.DateRange"
        type="daterange"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        :disabled-date="disabledDate"
        @calendar-change="handleChange"
        @clear="handleClear"
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item label="图片（多选）" prop="Thumbnails">
      <ImageUpload
        ref="thumbnailsRef"
        v-model="formModel.Thumbnails"
        multiple
        :limit="4"
      ></ImageUpload>
    </el-form-item>
    <el-form-item label="备注" prop="Type">
      <el-input v-model="formModel.Remark" type="textarea" placeholder="备注" />
    </el-form-item>

    <el-form-item label="备注" prop="Select">
      <el-checkbox-group v-model="formModel.Select">
        <el-checkbox value="1">label1</el-checkbox>
        <el-checkbox value="2">label2</el-checkbox>
        <el-checkbox value="3">label3</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-button type="primary" @click="moreAction">内层再弹一个</el-button>

    <div class="btn-groups">
      <el-space>
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button
          native-type="submit"
          :loading="isLoading"
          type="primary"
          @click="confirm"
          >提交</el-button
        >
      </el-space>
    </div>
  </el-form>
</template>

<script setup name="EditForm" lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { dayjs, ElButton, type FormRules } from 'element-plus';
  import { mergOwn } from '@/utils';
  import isBetween from 'dayjs/plugin/isBetween';

  dayjs.extend(isBetween);

  const props = defineProps({
    row: {
      type: Object,
      default: undefined
    }
  });

  const emits = defineEmits(['cancel', 'confirm', 'openMore']);

  const isLoading = ref(false);

  const thumbnailRef = ref<ImageUploadIns>();

  const thumbnailsRef = ref<ImageUploadIns>();

  const confirm = async () => {
    isLoading.value = true;
    try {
      await thumbnailRef.value?.submit();
      await thumbnailsRef.value?.submit();
      console.log(formModel.value);
      emits('confirm');
      return Promise.resolve();
    } catch (error) {
      return Promise.reject(error);
    } finally {
      isLoading.value = false;
    }
  };

  onMounted(() => {
    if (props.row) {
      mergOwn(formModel.value, props.row);
      formModel.value.OrderId = props.row.Id;
    }
  });

  const formModel = ref<any>({
    OrderId: '',
    Remark: '',
    Thumbnail: '',
    Thumbnails: [],
    DateRange: [],
    Select: []
  });

  const formRules = reactive<FormRules>({});

  const currentDateRange = ref<Date[]>([]);

  const handleClear = () => {
    currentDateRange.value = [];
  };
  const handleChange = (range: Date[]) => {
    currentDateRange.value = range;
  };

  const disabledDate = (current: Date) => {
    if (dayjs(current).isAfter(dayjs())) return true;
    const start = currentDateRange.value[0];
    const end = currentDateRange.value[1];
    if (!start || end) return false;
    return !dayjs(current).isBetween(
      dayjs(start).subtract(10, 'day'),
      dayjs(start).add(10, 'day')
    );
  };

  const moreAction = () => {
    // emits('cancel');
    emits('openMore');
  };
</script>

<style lang="less" scoped>
  .btn-groups {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
